<template>
	<!-- 开盒结果 -->
	<view>
		<image :src="gifUrl" class="dynamicpic" v-if="isShowdynamicpic"></image>
		<view v-else>
			<view class="back" @click="back()">
				<image src="/static/images/blindbox/back_h.png"></image>
			</view>
			<!-- 试玩 -->
			<view class="play" @tap.stop v-if="open_method == 3">
				<view class="play_text">恭喜获得</view>
				<view class="play_pic" :class="tryonceInfo.type=='稀有'?'xiyoubd':tryonceInfo.type=='史诗'?'shishibd':tryonceInfo.type=='传说'?'chuanshuobd':'putongbd'">
					<image :src="tryonceInfo.cover_image" class="play_pic_img"></image>
				</view>
				<view class="play_value">
					<text class="play_value_tag" :class="tryonceInfo.type=='稀有'?'xiyou':tryonceInfo.type=='史诗'?'shishi':tryonceInfo.type=='传说'?'chuanshuo':'putong'">{{tryonceInfo.type}}款</text>
					<view class="play_value_price">￥{{tryonceInfo.goods_price}}</view>
				</view>
				<view class="play_title">{{tryonceInfo.goods_name}}</view>
				<view class="play_fragment" v-if="tryonceInfo.s_goods != ''">
					<image :src="tryonceInfo.s_goods.s_image" class="play_fragment_img"></image>
					{{tryonceInfo.s_goods.goods_name}} {{tryonceInfo.s_goods.s_id}}号碎片<text>x1</text>
				</view>
				<view class="play_btn1" @click="continueGet()">直接来把真的</view>
				<view class="play_tip">注：本页面只作为中奖体验效果展示，非实际中奖！</view>
			</view>
			<!-- 五连抽 -->
			<view class="play" @tap.stop v-else-if="open_method == 2">
				<view class="play_text">恭喜获得</view>
				<view class="play_five">
					<view class="play_pics" v-for="(item,e) in extractionResults" :key="e">
						<view class="play_pics_image" :class="item.type=='稀有'?'xiyoubd':item.type=='史诗'?'shishibd':item.type=='传说'?'chuanshuobd':'putongbd'">
							<image :src="item.cover_image" class="play_pics_image_img"></image>
						</view>
						<view class="play_pics_value">
							<text class="play_pics_value_tag" :class="item.type=='稀有'?'xiyou':item.type=='史诗'?'shishi':item.type=='传说'?'chuanshuo':'putong'">{{item.type}}款</text>
							<view class="play_pics_value_price">￥{{parseInt(item.goods_price)}}</view>
						</view>
						<view class="play_pics_title">{{item.goods_name}}</view>
					</view>
					<view class="play_fragments">
						<view class="play_fragments_item" v-for="(item,f) in extractionResults" :key="f">
							<image :src="item.s_goods.s_image" class="play_fragments_item_img" v-if="item.s_goods != ''"></image>
							<view class="play_fragments_item_text" v-if="item.s_goods != ''">
								{{item.s_goods.goods_name}} {{item.s_goods.s_id}}号碎片
							</view> 
							<text style="color: #FF3E00" v-if="item.s_goods != ''">x1</text>
						</view>
					</view>
				</view>
				<view class="play_btn1" @click="continueGet()">再来五次</view>
				<navigator class="play_btn2" url="/pages/package/package">不喜欢，前往回收</navigator>
				<view class="play_tip">抽出不喜欢的商品，可前往背包中进行“回收”</view>
			</view>
			<!-- 单抽 -->
			<view class="play" @tap.stop v-else>
				<view class="play_text">恭喜获得</view>
				<view class="play_pic" :class="extractionResults[0].type=='稀有'?'xiyoubd':extractionResults[0].type=='史诗'?'shishibd':extractionResults[0].type=='传说'?'chuanshuobd':'putongbd'">
					<image :src="extractionResults[0].cover_image" class="play_pic_img"></image>
				</view>
				<view class="play_value">
					<text class="play_value_tag" :class="extractionResults[0].type=='稀有'?'xiyou':extractionResults[0].type=='史诗'?'shishi':extractionResults[0].type=='传说'?'chuanshuo':'putong'">{{extractionResults[0].type}}款</text>
					<view class="play_value_price">￥{{extractionResults[0].goods_price}}</view>
				</view>
				<view class="play_title">{{extractionResults[0].goods_name}}</view>
				<view class="play_fragment" v-if="extractionResults[0].s_goods != ''">
					<image :src="extractionResults[0].s_goods.s_image" class="play_fragment_img"></image>
					{{extractionResults[0].s_goods.goods_name}} {{extractionResults[0].s_goods.s_id}}号碎片<text>x1</text>
				</view>
				<view class="play_btn1" @click="continueGet()">再来一次</view>
				<view class="play_btn2" @click="repumping()" v-if="againcouponList.length>0 && extractionResults[0].can_again == 1">重抽一次</view>
				<navigator class="play_btn2" url="/pages/package/package" v-else>不喜欢，前往回收</navigator>
				<view class="play_tip">抽出不喜欢的商品，可前往背包中进行“回收”</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activity_id:'',//盲盒id
				order_id:'',//订单id
				price:'',//价格
				type:'buy',//是否是重抽
				open_method:1,//当前抽取的次数类型 1单抽 2五连抽 3试玩
				tryonceInfo:{
					goods_id:'',
					goods_name:'',
					goods_price:'',
					cover_image:'',
					s_goods:{
						goods_name:'',
						s_id:'',
						s_image:''
					}
				},//试玩结果	
				extractionResults:[
					{
						goods_id:'',
						goods_name:'',
						goods_price:'',
						cover_image:'',
						s_goods:{
							goods_name:'',
							s_id:'',
							s_image:''
						},
						type:''
					}
				],//抽取盲盒结果
				againcouponList:[],//可用的重抽卡列表
				gifUrl:'/static/images/dynamicpic.gif',//开盒动画
				isShowdynamicpic:true
			}
		},
		onLoad(options) {
			this.gifUrl = `/static/images/dynamicpic.gif?${new Date().getTime()}`
			this.activity_id = options.activity_id;
			this.order_id = options.order_id;
			this.price = options.price;
			this.open_method = options.open_method;
			if(this.open_method == 3){
				this.getDemo();
			}else{
				if(options.type && options.type == 'repumping'){
					this.type = options.type;
					console.log(options);
				}
				this.getIndexMyagaincoupon();
			}
			setTimeout(()=>{
				this.isShowdynamicpic = false;
			},2500)
		},
		methods: {
			back(){
				if(!uni.getStorageSync('token')){
					uni.switchTab({
						url:'/pages/index/index'
					})
				}else{
					uni.navigateTo({
						url: '/pages/index/extractionBlindbox'
					})
				}
			},
			//获取试玩结果
			getDemo(){
				this.$api.indexTryonce({activity_id:this.activity_id}).then(res=>{
					this.tryonceInfo = res;
				})
			},
			//获取抽取盲盒结果
			getIndexExtractboxc(){
				this.$api.indexExtractboxc({
					activity_id:this.activity_id,
					order_id:this.order_id,
				}).then(res=>{
					this.extractionResults = res;
					console.log(this.extractionResults);
					this.getPaidorder();
				})
			},
			//获取已付款待获取开盒结果的订单
			getPaidorder(){
				this.$api.paidorder().then(result=>{
					console.log("已付款待获取开盒结果的订单: ",result);
					if(result.all_num > 0){
						uni.showModal({
							title:'温馨提示',
							content:'您有已付款的盲盒未获取开盒结果，是否前往获取？',
							confirmText:'获取',
							success: (r) => {
								if(r.confirm){
									uni.navigateTo({
										url:'/pages/blindbox/blindbox_result?' + this.$url.urlEncode({
											activity_id:result.orders.activity_id,
											price:result.orders.pay,
											order_id:result.orders.order_id,
											open_method:result.orders.open_method
										})
									})
								}
							}
						})
					}
				})
			},
			//获取可用的盲盒重抽卡
			getIndexMyagaincoupon(){
				this.$api.indexMyagaincoupon({activity_id:this.activity_id,}).then(res=>{
					this.againcouponList = res;
					if(this.type == 'repumping'){
						this.repumping();
					}else{
						this.getIndexExtractboxc();
					}
				})
			},
			//再来一次-再来五次
			continueGet(){
				if(!uni.getStorageSync('token')){
				 	uni.showModal({
				 		title: '温馨提示',
				 		content: '登录后可继续操作，是否登录？',
				 		success: (res) => {
				 			if (res.confirm) {
				 				uni.navigateTo({
				 					url: '/pages/login/login'
				 				})
				 			}
				 		}
				 	})
				}else{
				 	uni.redirectTo({
				 		url:'/pages/blindbox/confirmPay?' + this.$url.urlEncode({
				 			activity_id:this.activity_id,
				 			price:this.price,
				 			open_method:this.open_method
				 		})
				 	})
				}
			},
			//重抽一次-跳转
			toRepumping(){
				uni.redirectTo({
					url:'/pages/blindbox/blindbox_open?' + this.$url.urlEncode({
						activity_id:this.activity_id,
						price:this.price,
						order_id:this.order_id,
						open_method:this.open_method,
						type:'repumping'
					})
				})
			},
			//重抽一次-获取结果
			repumping(){
				this.gifUrl = `/static/images/dynamicpic.gif?${new Date().getTime()}`
				this.isShowdynamicpic = true;
				this.$api.indexAgainextract({
					activity_id:this.activity_id,
					order_id:this.order_id,
					coupon_id:this.againcouponList[0].id
				}).then(res=>{
					this.extractionResults = res;
					this.type = 'buy';
					this.$api.indexMyagaincoupon({activity_id:this.activity_id,}).then(res=>{
						this.againcouponList = res;
					})
				})
			},
		}
	}
</script>

<style lang="scss">
page{
	background-image: url();
	background-size: cover;
	padding-top: 80rpx;
	padding-bottom: 30rpx;
}
.back{
	padding: 26rpx 0 0 50rpx;
	
	image{
		width: 50rpx;
		height: 50rpx;
	}
}
.dynamicpic{
	@include img;
	position: fixed;
	z-index: 99999;
	top: 0;
	left: 0;
}
.play{
	width: 100%;
	text-align: center;
	
	&_text{
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: bold;
		color: #000000;
	}
	&_pic{
		width: 360rpx;
		height: 360rpx;
		border-radius: 15rpx;
		border: 4rpx solid #492AFF;
		margin: 50rpx auto;
		position: relative;
		
		&_img{
			@include img;
			position: absolute;
			top: 0;
			left: 0;
		}
	}
	&_value{
		@include column-center;
		margin-top: 50rpx;
		
		&_tag{
			width: 96rpx;
			height: 36rpx;
			background: linear-gradient(180deg, #FF7900 0%, #FE1F08 100%);
			border-radius: 18rpx;
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			@include center;
		}
		&_price{
			font-size: 24rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #FF3E00;
			margin-top: 14rpx;
		}
	}
	&_fragment{
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
		@include center;
		margin-top: 48rpx;
		
		&_img{
			width: 34rpx;
			height: 44rpx;
			margin-right: 22rpx;
		}
		text{
			color: #FF3E00;
			margin-left: 12rpx;
		}
	}
	.play_five{
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}
	.play_pics{
		@include column-center;
		margin-right: 24rpx;
		margin-top: 48rpx;
		
		&:nth-child(3n){
			margin-right: 0;
		}
		
		&_image{
			width: 200rpx;
			height: 200rpx;
			border-radius: 15rpx;
			border: 4rpx solid #492AFF;
			position: relative;
			
			&_img{
				@include img;
				position: absolute;
				top: 0;
				left: 0;
				z-index: 99999;
			}
			text{
				color: #FF3E00;
				margin-left: 12rpx;
			}
		}
		&_title{
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
			margin-top: 12rpx;
			width: 200rpx;
			@include one;
		}
		&_value{
			font-size: 24rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #FFFFFF;
			@include column-center;
			margin-top: 20rpx;
			
			&_tag{
				width: 100rpx;
				height: 40rpx;
				border-radius: 20rpx;
				@include center;
				margin-right: 5rpx;
			}
			&_price{
				width: 140rpx;
				font-size: 24rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #FF3E00;
				@include one;
				margin-top: 14rpx;
			}
		}
	}
	&_fragments{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin-top: 30rpx;
		width: 630rpx;
		
		&_item{
			@include center;
			margin-bottom: 20rpx;
			
			&_img{
				width: 34rpx;
				height: 44rpx;
				margin-right: 6rpx;
			}
			&_text{
				width: 230rpx;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #666666;
				@include one;
			}
		}
	}
	&_title{
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		margin-top: 12rpx;
	}
	&_btn1{
		width: 480rpx;
		height: 76rpx;
		background: linear-gradient(180deg, #FFBE00 0%, #FF1200 100%);
		border-radius: 36rpx;
		font-size: 28rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		@include center;
		margin: 48rpx auto 0;
	}
	&_btn2{
		width: 480rpx;
		height: 76rpx;
		background: linear-gradient(180deg, #00E8FF 0%, #985FFF 100%);
		border-radius: 36rpx;
		font-size: 28rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		@include center;
		margin: 28rpx auto 0;
	}
	&_tip{
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		margin-top: 50rpx;
	}
}
.chuanshuo{
	background: linear-gradient(180deg, #FFBF00 0%, #FF7700 100%)!important;
}
.shishi{
	background: linear-gradient(180deg, #FF7900 0%, #FE1F08 100%)!important;
}
.xiyou{
	background: linear-gradient(180deg, #B557F7 0%, #742AFF 100%)!important;
}
.putong{
	background: linear-gradient(360deg, #492AFF 0%, #02E6FF 100%)!important;
}
.chuanshuobd{
	border: 4rpx solid #FFBF00 !important;
}
.shishibd{
	border: 4rpx solid #FF7900 !important;
}
.xiyoubd{
	border: 4rpx solid #B557F7 !important;
}
.putongbd{
	border: 4rpx solid #492AFF !important;
}
</style>
